<template>
	<div class="leftContent">
		<!-- 上 -->
		<div class="top">
			<Card title="实时电量">
				<div style="overflow-y: auto">
					<VertCard :num="dataObj.num" title="今日上网电量"></VertCard>
					<VertCard :num="dataObj.num2" title="今日实际发量"></VertCard>
					<div class="fd">
						<FdQk title="月发电情况"></FdQk>
						<div class="line"></div>
						<FdQk title="年发电情况"></FdQk>
					</div>
				</div>
			</Card>
		</div>

		<!-- 中 -->
		<div class="middle">
			<Card title="发电趋势">
				<Fdqs></Fdqs>
			</Card>
		</div>

		<!-- 下 -->
		<div class="bottom">
			<Card title="发电单元设备状态">
				<div class="cont">
					<div class="echart">
						<Fddy title="逆变器" @send-my-chart="sendMyChart1"></Fddy> <Fddy title="风机" @send-my-chart="sendMyChart2"></Fddy>
					</div>
					<FddyLegend :myChart1="myChart1" :myChart2="myChart2"></FddyLegend>
				</div>
			</Card>
		</div>
	</div>
</template>
<script setup>
import Card from "./con/card.vue";
import VertCard from "./con/vertNum.vue";
import FdQk from "./con/fdQk.vue";
import Fdqs from "./con/fdqs.vue";
import Fddy from "./con/fddy.vue";
import FddyLegend from "./con/fddyLegend.vue";

let jg = 3000;

const dataObj_ = reactive({
	num: "10000",
	num2: "20003"
});
const dataObj = reactive({
	num: "10000",
	num2: "20003"
});
let timerId = null;
let timerId2 = null;
setInterval(() => {
	// 获取数值 模拟数值
	dataObj_.num = dataObj_.num * 1 + 450;
	dataObj_.num2 = dataObj_.num2 * 1 + 450;
	// 清除定时器
	if (timerId) {
		clearInterval(timerId);
	}
	if (timerId2) {
		clearInterval(timerId2);
	}
	// 开启定时器  一点一点的更改数值
	timerId = setInterval(() => {
		if (dataObj.num * 1 < dataObj_.num * 1) {
			dataObj.num = dataObj.num * 1 + 1;
		}
		if (dataObj.num2 * 1 < dataObj_.num2 * 1) {
			dataObj.num2 = dataObj.num2 * 1 + 1;
		}
	}, 100);

	// 假设3秒钟内值没有累加完
	timerId2 = setTimeout(() => {
		if (dataObj.num * 1 < dataObj_.num * 1) {
			dataObj.num = dataObj_.num;
		}
		if (dataObj.num2 * 1 < dataObj_.num2 * 1) {
			dataObj.num2 = dataObj_.num2;
		}
	}, jg - 200);
}, jg);

let myChart1 = ref("1");
function sendMyChart1(v) {
	myChart1.value = v;
	console.log("v1==============================", myChart1);
}
let myChart2 = ref("2");
function sendMyChart2(v) {
	myChart2.value = v;

	console.log("v2==============================", myChart2);
}
</script>
<style lang="scss" scoped>
.leftContent {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	.top {
		height: 445px;
		overflow-y: auto !important;
		.line {
			position: relative;
			top: 30px;
			width: 1px;
			height: 155px;
			background: linear-gradient(rgba(80, 187, 255, 0) 0%, rgba(80, 187, 255, 0.2) 48%, rgba(80, 187, 255, 0) 100%);
			border-radius: 0px 0px 0px 0px;
		}
	}
	.middle {
		min-height: 250px;
		flex: 1;
		overflow: hidden;
		margin: 10px 0;
	}
	.bottom {
		height: 270px;

		.cont {
			display: flex;
			flex-direction: column;
			.echart {
				flex: 1;
				overflow: hidden;
				display: flex;
				justify-content: space-around;

				& > div:nth-child(1) {
					margin-right: 4px;
				}
			}
		}
	}
	.fd {
		display: flex;
	}
}
</style>
